<template>
  <div style="height:100%;">
    <drawer
      width="200px;"
      :show.sync="drawerVisibility"
      :show-mode="showModeValue"
      :placement="showPlacementValue"
      :drawer-style="{'background-color':'#35495e', width: '200px'}">
      <div slot="drawer">
        <!-- 菜单内容 -->
        <group title="菜单栏" title-color="#fff">
          <cell title="菜单一" value="菜单一"
                :is-link="drawerVisibility"
                @click.native="drawerVisibility = false"
          >
          </cell>
          <cell title="菜单二" :is-loading="drawerVisibility"></cell>
          <cell title="菜单三" value="菜单三"></cell>
          <cell title="下拉菜单"
                is-link
                :arrow-direction="showContent001?'up':'down'"
                @click.native="showContent001 = !showContent001">
          </cell>
          <template v-if="showContent001">
            <cell-box :border-intent="false" class="sub-item" is-link>下拉菜单 001</cell-box>
            <cell-box class="sub-item" is-link>下拉菜单 001</cell-box>
            <cell-box class="sub-item" is-link>下拉菜单 001</cell-box>
          </template>

        </group>
        <group title="打开动画效果" title-color="#fff">
          <radio
            :options="['push', 'overlay']"
            v-model="showMode" @on-change="onShowModeChange">
          </radio>
        </group>
        <group title="打开动画方向" title-color="#fff">
          <radio
            :options="['left', 'right']"
            v-model="showPlacement"
            :selected-label-style="{color: 'red'}" @on-change="onPlacementChange"></radio>
        </group>
      </div>
      <view-box ref="viewBox">
        <!--<x-header :right-options="{showMore: true}" :left-options="{showBack: false}" transition-->
                  <!--@on-click-more="showMenus=true">-->
          <!--<span>{{headerName}}</span>-->
          <!--&lt;!&ndash;<x-icon v-if="isHome" @click="showDrawer" slot="overwrite-left" type="navicon" size="35"&ndash;&gt;-->
          <!--&lt;!&ndash;style="fill:#fff;position:relative;top:-8px;left:-3px;"></x-icon>&ndash;&gt;-->
        <!--</x-header>-->

        <x-header
        :left-options="{showBack:false}"
        :right-options="{showMore: true}"
        :title="headerName"
        :transition="headerTransition"
        @on-click-more="showMenus=true"
        >
        <span slot="left" @click="drawerVisibility = !drawerVisibility" v-if="leftShow">
          <x-icon type="navicon" size="35" style="fill:#fff;position:relative;top:-8px;left:-3px;"></x-icon>
        </span>
          <span slot="left" v-else @click="back">
            <x-icon type="ios-arrow-back" size="35" style="fill:#fff;position:relative;top:-8px;left:-3px;"></x-icon>
          </span>
        </x-header>
        <router-view></router-view>
        <tabbar>
          <tabbar-item selected link="/index">
            <!--<img slot="icon" src="./assets/logo.png" alt="">-->
            <x-icon slot="icon" type="leaf" size="25"></x-icon>
            <span slot="label">首页</span>
          </tabbar-item>
          <tabbar-item link="/my">
            <x-icon slot="icon" type="person" size="25"></x-icon>
            <span slot="label">我的</span>
          </tabbar-item>
        </tabbar>
      </view-box>
    </drawer>
    <!--更多弹框-->
    <div>
      <actionsheet :menus="menus" v-model="showMenus"
                   @on-click-menu-delete="closeMe"></actionsheet>
    </div>
    <toast v-model="delSuccess" text="删除成功"></toast>
  </div>
</template>


<script>
  import {
    ViewBox, XHeader, Tabbar,
    TabbarItem, Actionsheet, Toast, Drawer, Cell, Group, Radio, CellBox
  } from 'vux';

  export default {
    data () {
      return {
        showMore: true,
        showMenus: false,
        isHome: false,
        delSuccess: false,
        menus: [
          {
            label: 'Primary',
            type: 'primary',
            value: 'primary',
            otherProp: 'hey'
          },
          {
            label: 'delete',
            type: 'warn',
            value: 'delete',
            otherProp: 'warn'
          }
        ],
        menus2: {
          'title.noop': 'Actionsheet header',
          delete: '<span style="color:red">Delete</span>'
        },
        drawerVisibility: false,
        showMode: 'push',
        showModeValue: 'push',
        showPlacement: 'left',
        showPlacementValue: 'left',
        arrowDirection: 'up',
        showContent001: false
      };
    },
    methods: {
      back () {
        this.$router.go(-1);
      },
      closeMe: function () {
        this.delSuccess = !this.delSuccess;
      },
      onShowModeChange (val) {
        console.log(val);
        /** hide drawer before changing showMode **/
        this.drawerVisibility = false;
        setTimeout(() => {
          this.showModeValue = val;
        }, 400);
      },
      onPlacementChange (val) {
        console.log(val);
        /** hide drawer before changing position **/
        this.drawerVisibility = false;
        setTimeout(() => {
          this.showPlacementValue = val;
        }, 400);
      }
    },
    components: {
      ViewBox,
      XHeader,
      Tabbar,
      TabbarItem,
      Actionsheet,
      Toast,
      Drawer,
      Cell,
      Group,
      Radio,
      CellBox
    },
    computed: {
      headerName () {
        let path = this.$route.path;
        let result = path.slice(path.lastIndexOf('/') + 1);
        let str = '';
        if (result === 'index' || result === '/') {
          str = '首页';
        } else if (result === 'my') {
          str = '我的';
        }
        return str;
      },
      headerTransition () {
        if (!this.direction) return '';
        return this.direction === 'forward' ? 'vux-header-fade-in-right' : 'vux-header-fade-in-left';
      },
      leftOptions () {
        return {
          showBack: this.$route.path !== '/'
        };
      },
      leftShow () {
        let path = this.$route.path;
        let result = path.slice(path.lastIndexOf('/') + 1);
        let str = true;
        if (result === 'index' || result === '/' || result === 'my') {
          str = true;
        } else {
          str = false;
        }
        return str;
      }
    }
  };
</script>

<style lang="less">
  @import '~vux/src/styles/reset.less';

  html, body {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
  }

  body {
    background-color: #fbf9fe;
  }

  .weui-cells_radio .weui-check:checked + .weui-icon-checked:before {
    color: red !important;
  }

  .weui-tabbar .weui-tabbar__item.weui-bar__item_on {
    fill: forestgreen;
    color: forestgreen;
  }

  .weui-tabbar .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label {
    color: forestgreen;
    fill: forestgreen;
  }
</style>
